/*
 * 店铺创建
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-12 09:45:36
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-customer-store-create {
		height: 74vh;
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
    }

</style>
<template>
	<div class="v-customer-store-create">
		<Row
			type="flex"
			justify="start">
			<i-col>
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="140"
					name="create__form">

					<Form-item
						:label="$t('store.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('store.please_enter_name')"
							name="create__name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('store.account')"
						prop="account">
						<i-input
							v-model="formValidate.account"
							:placeholder="$t('store.please_enter_account')"
							name="create__account"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('store.password')"
						prop="password">
						<i-input
							v-if="!show_password"
							v-model="formValidate.password"
							:placeholder="$t('store.please_enter_password')"
							name="create__password"
							type="password"
							icon="eye"
							@on-click="showPassword()"/>
						<i-input
							v-else
							v-model="formValidate.password"
							:placeholder="$t('store.please_enter_password')"
							name="create__password"
							type="text"
							icon="eye"
							@on-click="showPassword()"/>
					</Form-item>

					<Form-item
						:label="$t('store.email')"
						prop="email">
						<AutoComplete
							v-model="formValidate.email"
							:placeholder="$t('store.please_enter_email')"
							name="create__email"
							@on-search="handleSearch">
							<Option
								v-for="item in email_suffixs"
								:value="item"
								:key="item">{{ item }}</Option>
						</AutoComplete>
					</Form-item>

					<Form-item
						:label="$t('store.phone')"
						prop="phone">
						<i-input
							v-model="formValidate.phone"
							:placeholder="$t('store.please_enter_phone')"
							name="create__phone"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('store.type')"
						prop="type">
						<RadioGroup v-model="formValidate.type">
							<Radio
								label="1">
								<span>
									{{ $t('store.headquarters') }}
								</span>
							</Radio>
							<Radio
								label="2">
								<span>
									{{ $t('store.subbranch') }}
								</span>
							</Radio>
						</RadioGroup>
					</Form-item>

					<Form-item
						v-if="$i18n.locale === 'zh-CN'"
						:label="$t('store.province_city_district')"
						prop="resArr">
						<!-- <al-cascader
							v-model="formValidate.resArr"
							:filterable="true"
							data-type="name"
							auto
							level="2" /> -->
						<areaSelector
							v-model="formValidate.resArr"
							:gutter="0"
							searchable
							data-type="name"
							auto
							level="2"/>
					</Form-item>

					<Form-item
						:label="$t('store.address')"
						prop="address">
						<i-input
							v-model="formValidate.address"
							:placeholder="$t('store.please_enter_address')"
							name="address"
							type="text"/>
					</Form-item>

					<!-- <Form-item
						label="店铺备注"
						prop="remark">
						<i-input
							v-model="formValidate.remark"
							type="text"
							placeholder="请输入备注信息"/>
					</Form-item> -->

					<Form-item
						:label="$t('store.store_logo')"
						prop="store_img">
						<Uploader
							ref="store_img"
							@on-remove="(file)=>{handleRemove('store_img',file)}"
							@on-change="(file)=>{handleChange('store_img',file)}">
							{{ $t('common.pic_tip') }}
						</Uploader>
					</Form-item>

					<Form-item
						v-if="Number(getUserInfo.has_youzan) === 1"
						:label="$t('store.has_youzan')"
						prop="has_youzan">
						<i-switch
							v-model="formValidate.has_youzan"
							name="has_youzan"
							true-value="1"
							false-value="0">
							<Icon
								slot="open"
								type="android-done"/>
							<Icon
								slot="close"
								type="android-close"/>
						</i-switch>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							name="create__submit"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							name="create__reset"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import { validateImage } from 'src/validate';

import { mapGetters } from 'vuex';
import { showLocalImage } from 'src/views/mixins/showLocalImage'; // 引入公共的mixins
import areaSelector from 'src/views/component/area-selector';
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'CustomerStoreCreate',

	components: {
		areaSelector,
		Uploader,
	},

	mixins: [showLocalImage],

	data() {
		return {
			email_suffixs: [], // 自动补全email后缀

			formValidate: {
				name: '', // 店铺名称

				account: '', // 超管账号

				password: '', // 密码

				email: '', // 邮箱

				phone: '', // 店铺管理员电话

				type: '1', // 店铺类型

				resArr: [],	// 省市区

				address: '', // 店铺地址

				// remark: '', // 备注信息

				store_img: '', // 店铺头像

				has_youzan: '0', // 开通有赞
			}, // 新增店铺的表单
			show_password: false, // 显示账号密码

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.name') }),
						trigger: 'blur,change',
					},
				],
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.password') }),
						trigger: 'blur,change',
					},
					{
						required: true,
						message: this.$t('validate.min', { min: 6, field: this.$t('store.password') }),
						trigger: 'blur,change',
					},
				],
				email: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.email') }),
						trigger: 'blur,change',
					},
					{
						type: 'email',
						message: this.$t('validate.email', { field: '' }),
						trigger: 'blur,change',
					},
				],
				phone: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.phone') }),
						trigger: 'blur,change',
					},
				],
				resArr: [
					{
						required: false,
						type: 'array',
						message: this.$t('validate.required', { field: this.$t('store.province_city_district') }),
						trigger: 'blur,change',
					},
				],
				address: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.address') }),
						trigger: 'blur,change',
					},
				],
				type: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.type') }),
						trigger: 'blur,change',
					},
				],
				store_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],

				has_youzan: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('store.has_youzan') }),
						trigger: 'blur,change',
					},
				],

			},
		};
	},
	computed: {
		...mapGetters('userToken', [
			'getUserInfo',
		]),
	},
	methods: {

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			this.$refs.formValidate.validateField(field);
		},

		/**
		 * 删除图片
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			this.$refs.formValidate.validateField(field);
		},

		/**
         * 拼接自动补全的数据
         * @param  {string} value {输入的数据}
         * @return {undefined}
         */
		handleSearch(value) {
			this.email_suffixs = !value || value.indexOf('@') >= 0 ? [] : [
				`${value}@qq.com`,
				`${value}@sina.com`,
				`${value}@163.com`,
				`${value}@163.net`,
				`${value}@gmail.com`,
				`${value}@yahoo.com`,
				`${value}@msn.com`,
				`${value}@hotmail.com`,
				`${value}@aol.com`,
				`${value}@ask.com`,
				`${value}@live.com`,
			];
		},

		/**
         * 账号密码显示与隐藏
         * @return {undefined}
         */
		showPassword() {
			this.show_password = !this.show_password;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('post', this.formDataCreate());

					this.show_password = false;
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs.store_img.reset();
			this.$refs[name].resetFields();
		},

		/**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
		formDataCreate() {
			const new_object = {
				name: this.formValidate.name, // 店铺名称

				account: this.formValidate.account, // 超管账号

				password: this.formValidate.password, // 密码

				phone: this.formValidate.phone, // 店铺管理员电话

				type: this.formValidate.type, // 店铺类型

				province: this.formValidate.resArr[0], // 省

				city: this.formValidate.resArr[1], // 市

				district: this.formValidate.resArr[2], // 区

				address: this.formValidate.address, // 备注信息

				// remark: this.formValidate.remark, // 备注信息

				store_img: this.formValidate.store_img, // 店铺头像

				has_youzan: this.formValidate.has_youzan, // 开通有赞
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				if (typeof new_object[key] !== 'undefined' && new_object[key]) {
					form_data.append(key, new_object[key]);
				}
			});

			return form_data;
		},

	},
};
</script>
